<template>
	<view class="index">
		<image
			class="index-bg"
			src="/static/index/bg.png"
		></image>
		<view class="index-main">
			<view class="search flex items-center">
				<image
					class="search-icon"
					src="/static/index/search.png"
				></image>
				<input
					class="flex-1"
					type="text"
					placeholder-style="color: #6C7A94;"
					placeholder="输入搜索内容"
				/>
			</view>
			<view class="swiper">
				<swiper
					class="w-h-full"
					autoplay
				>
					<swiper-item
						class="w-h-full"
						v-for="item in 5"
					>
						<image
							class="w-h-full"
							src="/static/index/swiper.png"
							mode="aspectFit"
						></image>
					</swiper-item>
				</swiper>
			</view>
			<view class="nav flex justify-between text-center">
				<view
					class="nav-item"
					v-for="item in navList"
					@click="onNavItem(item)"
				>
					<image
						class="nav-item-icon"
						:src="item.icon"
					></image>
					<view class="nav-item-name">
						{{item.name}}
					</view>
				</view>
			</view>
			<!-- 热读推荐 -->
			<view
				class="card"
				v-for="card in cardList"
			>
				<view class="card-header flex justify-between">
					<view class="card-header-title">
						{{card.title}}
					</view>
					<navigator
						class="card-header-more flex items-center"
						hover-class="none"
						:url="'/pages/list/list?title='+card.title"
					>
						<text>更多</text>
						<image src="/static/arrow.png"></image>
					</navigator>
				</view>
				<view :class="'card-'+card.type">
					<view class="list">
						<navigator
							class="list-item"
							hover-class="none"
							:url="'/pages/list/detail/detail?recordId='+item.recordId+'&cover='+item.cover"
							v-for="item in card.list"
						>
							<view class="list-item-cover">
								<template v-if="item.coverEmpty">
									<view class="empty-title">
										{{item.title || '-'}}
									</view>
								</template>
								<image
									style="width: 100%;height: 100%;"
									:src="item.cover"
								></image>
							</view>

							<!-- 	<template v-else>
								<view class="list-item-cover flex-row-center overflow-hidden">
									{{item.title}}
								</view>
							</template> -->

							<view class="list-item-content">
								<view class="list-item-name">
									{{item.title}}
								</view>
								<template v-if="card.type === 'vertical'">
									<view class="list-item-text">
										{{item.author}}
									</view>
									<view class="list-item-text">
										{{item.isbn}}
									</view>
									<view
										v-if="item.cnt"
										class="list-item-text"
									>
										借阅{{item.cnt}}次
									</view>
								</template>
							</view>
						</navigator>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		find
	} from '../../api/modules/find';
	import {
		getImageUrl,
		getHotLoanApi,
		mock
	} from '../../api/modules/mock';
	import {
		getCovers
	} from '../../utils/cover/cover';

	export default {
		data() {
			return {
				navList: [{
						name: "扫码条码号",
						icon: require("@/static/index/nav01.png"),
						type: "scan"
					},
					{
						name: "输入条码号",
						icon: require("@/static/index/nav02.png"),
						type: "input"
					},
					{
						name: "分类浏览",
						icon: require("@/static/index/nav03.png"),
						page: "/pages/list/list?type=cate"
					},
					{
						name: "馆藏地导航",
						icon: require("@/static/index/nav04.png"),
						page: "/pages/list/list?type=nav"
					}
				],
				cardList: [{
						title: "热读推荐",
						type: "horizontal",
						list: [],
					},
					{
						title: "新书通报",
						type: "vertical",
						list: [],
					}
				]

			}
		},
		onLoad() {
			this.getCardList()
		},
		methods: {
			onNavItem(navItem) {
				console.log('navItem', navItem);
				if (navItem.page) {
					uni.navigateTo({
						url: navItem.page + "&title=" + navItem.name
					})
				} else if (navItem.type === 'input') {
					uni.showModal({
						title: navItem.name,
						editable: true,
						placeholderText: '请输入' + navItem.name,
						success: ({
							content,
							confirm
						}) => {
							if (confirm) {
								console.log('uni.showModal-content', content);
							}
						}
					})
				} else if (navItem.type === 'scan') {
					this.getMockData()
					return
					// #ifndef H5
					uni.scanCode({
						success: ({
							result
						}) => {
							console.log('uni.scanCode', result);
						}
					})
					// #endif
					// #ifdef H5
					uni.showToast({
						title: "当前平台暂不支持！",
						icon: "none"
					})
					// #endif
				}
			},

			async getCardList() {
				const hotList = await find.index.getHotLoan({
					"disCode": null,
					"page": 1,
					"rows": 10,
					"indexFlag": 1,
					"statRange": 365
				}).then((data) => getCovers(data.result))
				console.log('hotList', hotList);
				const newBookList = await find.index.getNewBook({
					"page": 1,
					"rows": 6,
					"time": "4",
					"docCode": "1"
				}).then((data) => getCovers(data.searchResult))
				console.log('newBookList', newBookList);
				Promise.all([hotList, newBookList]).then((list) => {
					this.cardList = this.cardList.map((item, index) => {
						return {
							...item,
							list: list[index]
						}
					})
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: unset;
	}

	.index {
		min-height: 100vh;
		position: relative;
		background-color: #FFF3E2;
		padding-bottom: 30rpx;

		&-bg {
			// 375px x 279px
			width: 100%;
			height: 558rpx;
			position: absolute;
			top: 0;
			left: 0;
		}

		&-main {
			position: relative;
			overflow: hidden;
			padding: 0 24rpx;
			box-sizing: border-box;

			.search {
				width: 100%;
				height: 72rpx;
				background: #FFFFFF;
				box-shadow: inset 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
				border-radius: 36rpx;
				margin: 196rpx auto 0;
				padding: 0 30rpx;
				box-sizing: border-box;

				&-icon {
					width: 36rpx;
					height: 36rpx;
				}

				&>input {
					margin-left: 20rpx;
					font-size: 28rpx;
				}
			}
		}

		.swiper {
			margin-top: 32rpx;
			border-radius: 16rpx;
			box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
			overflow: hidden;
			height: 336rpx;
		}

		.nav {
			margin-top: 38rpx;

			&-item {
				&-icon {
					width: 96rpx;
					height: 96rpx;
				}

				&-name {
					margin-top: 18rpx;
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
					text-align: center;
				}
			}
		}


		.card {
			margin-top: 32rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			overflow: hidden;

			&-header {
				padding: 32rpx 24rpx 0 32rpx;
				box-sizing: border-box;

				&-title {
					font-weight: 500;
					font-size: 36rpx;
					color: #333333;
				}

				&-more {
					font-weight: 400;
					font-size: 28rpx;
					color: #6C7A94;

					&>image {
						width: 14rpx;
						height: 24rpx;
						margin-left: 16rpx;
					}
				}
			}

			.list {
				&-item {
					&-cover {
						width: 184rpx;
						height: 256rpx;
						border-radius: 16rpx;
						overflow: hidden;
						box-shadow: inset 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
						flex-shrink: 0;
						position: relative;

						.empty-title {
							width: 100%;
							height: 30%;
							padding: 0 10%;
							box-sizing: border-box;
							display: flex;
							align-items: flex-end;
							justify-content: center;

							position: absolute;
							top: 0;
							left: 0;
							font-size: 16rpx;
						}
					}

					&-name {
						font-weight: 500;
						color: #262626;
					}
				}

			}

			&-horizontal {
				width: 100%;
				padding: 0 24rpx 32rpx;
				box-sizing: border-box;

				overflow: hidden;
				margin-top: 24rpx;

				.list {
					display: flex;
					width: 100%;
					overflow-x: auto;
					overflow-y: hidden;

					&-item {
						margin-right: 24rpx;

						&-name {
							text-align: center;
						}
					}
				}
			}

			&-vertical {
				width: 100%;

				.list {
					&-item {
						display: flex;
						margin: 0 24rpx;
						border-bottom: 2rpx solid #EBEBEB;
						padding: 24rpx 0;

						&-content {
							margin-left: 24rpx;
						}

						&-text {
							margin-top: 20rpx;
							font-size: 28rpx;
							color: #6C7A94;
						}
					}
				}
			}

		}
	}
</style>